<%@ page import="java.util.List" %>
<%@ page import="com.bean.Bhcase" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/12
  Time: 8:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<html>
<head>
    <title>答题</title>
    <link href="/BhSyCase/css/base.css" rel="stylesheet"/>
    <link href="/BhSyCase/css/dati.css" rel="stylesheet"/>

    <link href="/BhSyCase/css/green.css" rel="stylesheet"/>
    <style type="text/css">
        a{
            text-decoration:none;
        }
        .a {
            width: 31px;
            height: 31px;
            line-height: 31px;
            font-size: 14px;
            text-align: center;
            border: 1px solid #dedede;
            float: left;
            color: #fff;
        }
    </style>
</head>
<body class="jn zuoti">
<strong></strong>
<div class="g-box">
    <div class="g-container ym-clearfix">
        <div class="g-sd" id="t">
            <div id="zuoti-time" class="m-clock" style="">
                <span id="t_h">00</span>
            </div>

            <div class="m-example ym-clearfix">
                <div class="num-box ym-clearfix">
                    <div class="num-block"></div>
                    <div class="num-info">未答</div>
                </div>
                <div class="num-box ym-clearfix">
                    <div class="num-block num-yida"></div>
                    <div class="num-info">已答</div>
                </div>
                <div class="num-box ym-clearfix">
                    <div class="num-block num-dangqian"></div>
                    <div class="num-info">当前</div>
                </div>
                <div class="num-box ym-clearfix">
                    <div class="num-block num-biaoji"></div>
                    <div class="num-info">标记</div>
                </div>
            </div>
            <input type="hidden" id="qIndex" value="0" />
        </div>
        <div class="g-mn">
            <div class="m-biezhen"></div>
            <div class="m-pen"></div>
            <h1 id="paper-title">${list.get(0).getcName()}</h1>

            <div class="g-title ym-clearfix">
                <div class="g-function ym-clearfix">
                    <div class="tixing" id="fs">单选题(2分)</div>
                    <a id="kaoti_Sign" onclick="setSign()" href="javascript:void(0)" class="mark">标记本题</a>
                </div>
            </div>
            <div class="g-mnc">
                <div class="m-question">
                    <div class="question-title ym-clearfix">
                        <div class="num">01.这是一个题目标题</div><div class="tigan"></div>
                    </div>
                    <div id="kaoto_Answer" class="">
                        <div class="item-line ym-clearfix" id="a">
                            <div class="item">
                                <div class="iradio_square-green">
                                    <input type="radio" onclick="input('a')" name="answer" value="" id="answer_a" style=" width: 140%; height: 140%;">
                                </div>
                                <label for="answer_a" class="tihao" >A.</label>
                            </div>
                            <label for="answer_a" class="xuanxiang" id="Texta">a</label>
                        </div>
                        <div class="item-line ym-clearfix" id="b">
                            <div class="item">
                                <div class="iradio_square-green">
                                    <input type="radio" onclick="input('b')" name="answer" value="" id="answer_b" style=" width: 140%; height: 140%;">
                                </div>
                                <label for="answer_b" class="tihao">B.</label>
                            </div>
                            <label for="answer_b" class="xuanxiang" id="Textb">b</label>
                        </div>
                        <div class="item-line ym-clearfix" id="c">
                            <div class="item">
                                <div class="iradio_square-green">
                                    <input type="radio" onclick="input('c')" name="answer" value="" id="answer_c" style=" width: 140%; height: 140%;">
                                </div>
                                <label for="answer_c" class="tihao">C.</label>
                            </div>
                            <label for="answer_c" class="xuanxiang" id="Textc">c</label>
                        </div>
                        <div class="item-line ym-clearfix" id="d">
                            <div class="item">
                                <div class="iradio_square-green">
                                    <input type="radio" onclick="input('d')" name="answer" value="" id="answer_d" style=" width: 140%; height: 140%;">
                                </div>
                                <label for="answer_d" class="tihao">D.</label>
                            </div>
                            <label for="answer_d" class="xuanxiang" id="Textd">d</label>
                        </div>
                    </div>
                </div>
                <div class="g-next ym-clearfix">
                    <a href="javascript:void(0)" onclick="go('-1')" class="u-btn u-btn-last">上一题</a>
                    <a href="javascript:void(0)" onclick="go('1')" class="u-btn u-btn-next">下一题</a>
                    <div class="g-button ym-clearfix">
                        <a href="javascript:void(0)" onclick="ti()" class="u-btn u-btn-jiaojuan">交卷</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none;" id="alert_dialog" class="alert">
    <div class="alert-top">
        <div class="alert-title">提 示</div>

    </div>
    <div class="alert-body">
        <div class="alert-search-result">
            <div class="alert-search-result-item">
                <div class="alert-search-result" id="content">

                </div>
            </div>
        </div>
        <div class="alert-bottom clearfix">
            <div class="auto-close-outer clearfix">
                <a href="javascript:void(0)" id="btn" class="auto-close">关闭</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function addCreateElement(html,Fobj,obj){
        obj = document.createElement(obj);
        if(html){
            Fobj.appendChild(obj);
            obj.innerHTML=html;
            return obj;
        }else{
            Fobj.appendChild(obj);
            return obj;
        }
    }
    function go(i) {
        dangexen(dang+i*1);
    }
    var DA=localStorage.getItem("DA");
    function input(str) {
        var a = localStorage.getItem("DA");
        if(a!=null){
            a = a.split(",,");
            a[dang] = str;
            a = a.join(",,");
            localStorage.setItem("DA", a);
        }else{
            DA[dang] = str;
            a = DA.join(",,");
            localStorage.setItem("DA", a);
        }
        DA = localStorage.getItem("DA");
    }


    function ti() {
        var boo = window.confirm("是否要提交考卷?");
        if(boo==true){
            var str = localStorage.getItem("DA");
            localStorage.clear();
            window.location.href="/BhSyCase/UsecasetrueServlet/suan?a=q&daan="+str+"&url=${list.get(0).getcUrl()}";
        }
    }


    var day=document.querySelector("#t_h");
    var az=${Tim*1};
    var key = setInterval(function () {
        if (az < 1000) {
            var str = localStorage.getItem("DA");
            window.location.href="/BhSyCase/UsecasetrueServlet/suan?a=q&daan="+str+"&url=${list.get(0).getcUrl()}";
            day.innerHTML = "考试已结束"
            clearInterval(key);
        } else {
            az -= 1000;
            day.innerHTML = time(az);
        }
    }, 1000);
    function time(timea) {
        var days = Math.floor(timea / (24 * 3600 * 1000));
        //计算出小时数
        var leave1 = timea % (24 * 3600 * 1000);
        //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000));
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000));
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);
        return  hours+":"+minutes+":"+seconds;
    }

    var  dang=0;
    var tx;
    var shijuan;
    var fenshu;
    var shttp =new XMLHttpRequest();
    var kai=0;
    var name = "<%= ((List<Bhcase>) request.getAttribute("list")).get(0).getcName()%>";

    function tmq() {
    shttp.open("Post","/BhSyCase/UsecasetrueServlet/Huoti",true);
    shttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    shttp.send("Url=${list.get(0).getcUrl()}");//发送
    shttp.onreadystatechange=function(){
        if(shttp.readyState==4  && shttp.status==200){
            var d=JSON.parse(shttp.responseText)[0];
            shijuan=d.cID.split(",");
            fenshu=d.cNum.split(",");
            kai++;
            /*添加左侧题目
            * <div class="number-panel">
                        <a class="a" href="javascript:void(0)">4</a>
                    </div>
            *
            * */


            if(localStorage.getItem("DA")!=null){
                DA = localStorage.getItem("DA");
                DA = DA.split(",,");
            }
            var tdiv = document.getElementById("t");
            for (var i = 0; i < shijuan.length; i++) {
                var divs = addCreateElement("", tdiv, "div");
                divs.className = "number-panel";
                var a = addCreateElement(i + 1, divs, "a");
                a.className = "a";
                a.id = i;
                if(DA!=null) {
                    if (DA[i] != "" && DA[i] != ",") {
                        a.style.backgroundColor = "#66b847";
                    }
                }
                a.href = "javascript:void(0)";
            }
        }
    }


    }
    function dangexen(k) {
        if (DA!=null){DA = localStorage.getItem("DA").split(",,");}
        if(k>-1&&k<shijuan.length){
            vidzs[dang].style.backgroundColor="";
            if(DA!=null) {
                if (/[a-c A-C]/.test(DA[dang])) {
                    vidzs[dang].style.backgroundColor = "#66b847";
                }
            }
            dang=k;
            tm();
        }else if(k<shijuan.length){
            ti();
        }
    }
    var vidzs;
    var  uds=document.querySelector(".num");
    var  diva=document.createElement("div");
    var  tablea=document.createElement("table");
    var  Text=document.querySelectorAll("#Texta,#Textb,#Textc,#Textd,#fs");
    var inputs = document.querySelectorAll(".iradio_square-green ");
    var int = ["a","b","c","d"];
    function tm() {
        shttp.open("Post", "/BhSyCase/UsecasetrueServlet/tim", true);
        shttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        shttp.send("ti=" + shijuan[dang * 1]);//发送
        shttp.onreadystatechange = function () {
            if (shttp.readyState == 4 && shttp.status == 200) {
                var d = JSON.parse(shttp.responseText)[0];
                uds.innerHTML = dang + 1 + "." + d.cPor;
                /*<div id="kaoto_Answer" class="">
                        <div class="item-line ym-clearfix" id="a">
                            <div class="item">
                                <div class="iradio_square-green">
                                    <input type="radio" onclick="input('a')" name="answer" value="" id="answer_a" style=" width: 140%; height: 140%;">
                                </div>
                                <label for="answer_a" class="tihao" >A.</label>
                            </div>
                            <label for="answer_a" class="xuanxiang" id="Texta">a</label>
                        </div>*/
                var po=0;
                for (let i = 0; i < inputs.length; i++) {
                    if (d.cType.indexOf("多") != -1) {
                        tx=true;
                        inputs[i].innerHTML = "";
                        var checkBox = document.createElement("input");
                        checkBox.setAttribute("type", "checkbox");
                        checkBox.setAttribute("name", int[i]);
                        checkBox.setAttribute("id", "answer_" + int[i]);
                        checkBox.style = "width: 30px; height: 30px;";
                        inputs[i].appendChild(checkBox);
                        obj = document.querySelectorAll(".iradio_square-green>input");
                        checkBox.onclick = function(){
                                check_val = [];
                                for (k in obj) {
                                    //判断复选框是否被选中
                                    if (obj[k].checked)
                                        //获取被选中的复选框的值
                                        check_val.push(obj[k].name);
                                }
                                check_val = check_val.join(",");
                                input(check_val);
                        }
                        if(DA!=null){
                            if(DA[dang]!=""){
                                if( obj[i].name==DA[dang].split(",")[po]){
                                    po++;
                                    obj[i].checked=true;
                                }
                            }
                        }
                    } else {
                        tx=false;
                        inputs[i].innerHTML = "";
                        var checkBox = document.createElement("input");
                        checkBox.setAttribute("type", "radio");
                        checkBox.setAttribute("name", "s");
                        checkBox.setAttribute("id", "answer_" + int[i]);
                        checkBox.style = "width: 30px; height: 30px;";
                        checkBox.onclick = function(){
                            input(int[i]);
                            dangexen(dang+1);
                        }
                        inputs[i].appendChild(checkBox);
                        if(DA!=null){
                            if(DA[dang]!=""){
                                if( int[i]==DA[dang]){
                                    checkBox.checked=true;
                                }
                            }
                        }
                    }
                }


            Text[0].innerText = d.cType + "(" + fenshu[dang] * 1 + "分)";
            Text[1].innerText = d.cA;
            Text[2].innerText = d.cB;
            Text[3].innerText = d.cC;
            Text[4].innerText = d.cD;
            vidzs[dang].style.backgroundColor = "red";
        }
    }
    }
    window.onload=function () {
        tmq();
        var key = setInterval(function () {
            if (kai => 1) {
                clearInterval(key);
                vidzs = document.querySelectorAll(".a");
                for(let i=0;i<vidzs.length;i++){
                    vidzs[i].onclick = function (){dangexen(i)};
                }
                tm();
            }
        }, 1000)
    }
    var key2 = setInterval(function () {
    if(shijuan!= undefined){
        clearInterval(key2);
        if(localStorage.getItem("DA")!=null){
            // DA=DA.split(",,");

        }else{
            DA = new Array(shijuan.length);
        }}},2000);



</script>
</body>
</html>
